<nz-card class="m-b-2">
    <div class="common-search-wrap">
        <div class="common-search-btns">
            <button nz-button nzType="primary" [routerLink]="['../save',0]" *ngIf="permission.userPermission.has('marketing:coupon:add')">新增优惠券</button>
        </div>

        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">优惠券名称</label>
                <div class="common-search-conrol">
                    <input class="seach-ipt" type="text" nz-input placeholder="请输入优惠券名称" [(ngModel)]="queryForm.name" />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">状态</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzAllowClear
                        [nzMaxTagCount]="1"
                        nzMode="multiple"
                        nzPlaceHolder="全部"
                        [(ngModel)]="stateSelected"
                        (ngModelChange)="stateChange($event)">
                        <nz-option
                            *ngFor="let item of stateOptions"
                            [nzLabel]="item.label"
                            [nzValue]="item.value">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="query()">查询</button>
                    <button nz-button nzType="default" (click)="backList()">重置</button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="pagination-wrap-position">
    <!-- Table  -->
    <div class="table-wrap">
        <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzScroll]="{ x: '1100px' }"
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableLoading"
        [nzData]="listOfData?.records"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="listOfData?.total"
        [nzPageIndex]="queryForm.pageNum"
        [nzPageSize]="queryForm.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
        >
        <thead>
            <tr>
                <!-- <th [(nzChecked)]="checked" (nzCheckedChange)="onAllChecked($event)"></th> -->
                <th nzAlign="center" nzWidth="190px" nzLeft>券码</th>
                <th nzAlign="center" nzWidth="220px">优惠券名称</th>
                <th nzAlign="center" nzWidth="320px">优惠内容</th>
                <th nzAlign="center" nzWidth="320px">备注</th>
                <th nzAlign="center" nzWidth="120px">已领取</th>
                <th nzAlign="center" nzWidth="120px">剩余</th>
                <!-- <th nzAlign="center">已使用</th> -->
                <!-- <th nzAlign="center">成交总额</th> -->
                <!-- <th nzAlign="center">客单价</th> -->
                <th nzAlign="center" nzWidth="180px">类型</th>
                <th nzAlign="center" nzWidth="160px">状态</th>
                <th nzAlign="center" nzWidth="385px" nzRight>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngIf="searchHint && listOfData?.records">
                <td nzAlign="center" colspan="9">
                    <span>搜索 “{{searcName}}”，找到&nbsp;{{ listOfData?.total }}&nbsp;条结果</span>
                    <a nz-button nzType="link" (click)="backList()">返回原列表</a>
                </td>
            </tr>
            <tr *ngFor="let data of basicTable.data; let index = index;">
                <!-- <td nzAlign="center" [nzChecked]="data.Checked" (nzCheckedChange)="onItemChecked(data.id, $event)"></td> -->
                <td nzAlign="center" nzLeft>{{ data.no || '-' }}</td>
                <!-- 优惠券名称 -->
                <td nzAlign="center" nzBreakWord>
                    <span class="name">{{ data.name }}</span>
                </td>
                <!-- 优惠内容 -->
                <td nzAlign="center" nzBreakWord>
                    <span class="name">{{ data.useDesc }}</span>
                </td>
                <!-- 备注 -->
                <td nzAlign="center" nzBreakWord>
                    <span class="name">{{ data.remark ? data.remark : '---' }}</span>
                </td>
                <!-- 已领取 -->
                <td nzAlign="center">
                    <span class="font_blue">{{ data.numberReceived }}</span>
                </td>
                <!-- 剩余 -->
                <td nzAlign="center">
                    <span class="{{data.remainingNumber < 1000 ? 'font_red' : ''}}">
                        {{ data.remainingNumber }}
                    </span>
                </td>
                <!-- 已使用 -->
                <!-- <td nzAlign="center">{{data.usedNumber}}</td> -->
                <!-- 成交总额 -->
                <!-- <td nzAlign="center">￥{{data.totalTurnover}}</td> -->
                <!-- 客单价 -->
                <!-- <td nzAlign="center">￥{{data.customerPrice}}</td> -->
                <!-- 类型 -->
                <td nzAlign="center">
                    {{ data.type == 1 ? '满减券' : data.type == 2 ? '折扣券' : '随机券' }}
                </td>
                <!-- 状态 -->
                <td nzAlign="center">
                    <span class="{{data.status == 1 ? 'font_Green' : data.status == 2 ? 'font_Yellow' :data.status == 6 ? 'font_Black' : 'font_Gray' }}">
                        {{ data.statusText }}
                    </span>
                </td>
                <!-- 操作 -->
                <td nzAlign="center" class="ms-btns" nzRight>
                    <button
                        *ngIf="permission.userPermission.has('marketing:coupon:view')"
                        nz-button
                        nzType="link"
                        [routerLink]="['/sell/couponDetail',data.id]"
                    >查看</button>
                    <button
                        *ngIf="permission.userPermission.has('marketing:coupon:edit')"
                        nz-button
                        nzType="link"
                        [routerLink]="['../save',data.id]"
                    >编辑</button>
                    <a
                        *ngIf="permission.userPermission.has('marketing:coupon:copy')"
                        nz-button
                        nzType="link"
                        [routerLink]="['../save',data.id, { type:'copy' }]"
                    >复制</a>
                    <button
                        *ngIf="permission.userPermission.has('marketing:coupon:check')"
                        nz-button
                        nzType="link"
                        [disabled]="data.status != 6"
                        (click)="showModal(data.id)"
                    >审核</button>
                    <!-- <button
                        nz-button
                        nzType="link"
                    >提交审核</button> -->
                    <a
                        *ngIf="permission.userPermission.has('marketing:coupon:stop')"
                        nz-button
                        nzType="link"
                        nz-popconfirm
                        [disabled]="data.status != 1 && data.status != 2"
                        nzPopconfirmTitle="确定停止该优惠券的发放?"
                        (nzOnConfirm)="stop(data.id)">
                        停止
                    </a>
                    <a
                        *ngIf="permission.userPermission.has('marketing:coupon:delete')"
                        nz-button
                        nzType="link"
                        nzDanger
                        nz-popconfirm
                        nzPopconfirmTitle="确认删除吗?"
                        [nzIcon]="iconTpl"
                        [disabled]="data.status != 1 && data.status != 5"
                        (nzOnConfirm)="confirm(data.id)">
                        删除
                    </a>
                    <ng-template #iconTpl>
                        <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                    </ng-template>
                    <button
                        *ngIf="permission.userPermission.has('marketing:coupon:manually')"
                        nz-button
                        nzType="link"
                        [disabled]="data.status != 1 && data.status != 2"
                        (click)="showCloseModal(data)"
                    >手动发放</button>
                    <button
                        *ngIf="[1, 2].includes(data.status)"
                        nz-button
                        nzType="link"
                        nz-popconfirm
                        nzPopconfirmTitle="确认生成商品标签?"
                        (nzOnConfirm)="generateGoodLable(data)"
                    >生成商品标签</button>
                </td>
            </tr>
        </tbody>
        </nz-table>

        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>

<nz-modal [(nzVisible)]="sendCouponsModal" nzTitle="手动发放优惠券" (nzOnCancel)="handleCancel()" [nzFooter]="null"
    [nzWidth]="550">
    <ng-container *nzModalContent>
        <nz-form-item>
            <nz-form-label [nzSpan]="5">请选择用户id</nz-form-label>
            <nz-form-control [nzSpan]="18">
                <nz-select nzMode="multiple" (nzScrollToBottom)="loadMore()" nzPlaceHolder="请选择用户id" nzAllowClear
                    nzShowSearch nzServerSearch [nzDropdownRender]="renderTemplate" [(ngModel)]="userSelectedValue"
                    (nzOnSearch)="onSearch($event)">
                    <ng-container *ngIf="!selectSearchLoading">
                        <nz-option nzCustomContent *ngFor="let o of userListOption.userList" [nzValue]="o.label"
                            [nzLabel]="o.label">
                            <span>{{o.label}}</span>
                        </nz-option>
                    </ng-container>
    
                    <nz-option *ngIf="selectSearchLoading" nzDisabled nzCustomContent>
                        <i nz-icon nzType="loading" class="loading-icon"></i> Loading Data...
                    </nz-option>
                </nz-select>
    
                <ng-template #renderTemplate>
                    <nz-spin *ngIf="userListOption.isLoading"></nz-spin>
                </ng-template>
    
                <!-- <nz-select nzMode="multiple" nzPlaceHolder="请选择用户id" [nzOptions]="userListOption" [(ngModel)]="userSelectedValue"> </nz-select> -->
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control [nzOffset]="5">
                <button nz-button nzType="primary" class="m-r-8" (click)="sendCoupons()">确定</button>
                <button nz-button nzType="primary" (click)="handleCancel()">取消</button>
            </nz-form-control>
        </nz-form-item>
    </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="auditVisible" nzTitle="审核" (nzOnCancel)="handleCancel()" [nzFooter]="null">
    <ng-container *nzModalContent>
        <nz-form-item>
            <nz-form-label [nzSpan]="4">审核意见</nz-form-label>
            <nz-form-control [nzSpan]="14">
                <textarea rows="6" nz-input [(ngModel)]="auditParam.reviewRemark"  nzPlaceHolder="请输入审核意见" [maxlength]="100"></textarea>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control [nzSpan]="12" [nzOffset]="4">
                <button nz-button nzType="primary" class="m-r-8" (click)="auditSave(1)">通过</button>
                <button nz-button nzType="primary" class="m-r-8" (click)="auditSave(7)">不通过</button>
                <button nz-button nzType="default" (click)="handleCancel()">取消</button>
            </nz-form-control>
        </nz-form-item>
    </ng-container>
</nz-modal>
